<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {useProgressStore} from "../stores/progressStore.js";
const progressStore = useProgressStore()
const router = useRouter()
import scrollToAnchor from "../assets/scrollToAnchor.js"
// 语言切换
import {useI18n} from "vue-i18n";
import {ElMessage} from "element-plus";

const {locale} = useI18n();
const changeLanguage = () => {
  locale.value = locale.value === 'zh' ? 'en' : 'zh'
}
//当前用户名
const name = ref('')
//获取当前用户名
const getCurrentName = () => {
  if (sessionStorage.getItem('name') !== null) {
    name.value = sessionStorage.getItem('name')
  }
}
getCurrentName()
//用户头像
const avatar = ref('')
//获取用户头像
const getAvatar = () => {
  if (sessionStorage.getItem('avatar') !== null) {
    avatar.value = sessionStorage.getItem('avatar')
  }
}
getAvatar()
//用户类型
const type = ref('')
//获取用户类型
const getType = () => {
    if (sessionStorage.getItem('type') !== null) {
        type.value = sessionStorage.getItem('type')
    }
}
getType();
//退出登录
const quitLogin = () => {
  sessionStorage.clear()
  progressStore.resetProgress()
  router.push('/login')
}
//食堂登录
const cantennLogin = () =>{
    if(type.value=='' || type.value ==0){
        router.push('/wisdomeat') //游客或学生登陆到食堂界面
    }else if(type.value==6){
        router.push('/wisdomeatmanage') //商家登录到后台管理页面
    }else if(type.value==1){
        router.push('/wisdomeatadmin') //管理员登录到管理员页面
    }
}
//
const welcome=()=>{
  if(sessionStorage.getItem("type")==='0'|| sessionStorage.getItem("type")==='3'){
    router.push('/welcome')
  }else {
    ElMessage.info("身份不符")
  }
}
</script>

<template>
  <div class="commonStart">
    <hr>
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <img src="../assets/common/1logo.png" height="80" width="240" alt=""/>
        <ul class="nav-links">
          <li><a href="#" class="nav-link">{{ $t('navbar.home') }}</a></li>
          <li><a href="#features" class="nav-link" @click="scrollToAnchor">{{ $t('navbar.features') }}</a></li>
          <li><a href="#about" class="nav-link" @click="scrollToAnchor">{{ $t('navbar.aboutUs') }}</a></li>
          <li><a href="#" class="nav-link">{{ $t('navbar.tellUs') }}</a></li>
          <li><a href="#" class="nav-link" @click="router.push('/statistic')">{{ $t('navbar.dp') }}</a></li>
          <li><a href="#" class="nav-link" @click="changeLanguage">
            <svg t="1721700068640" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="2642" width="32" height="32">
              <path
                  d="M846.04 866.77c-17.08 2.03-32.57-10.18-34.59-27.26-0.22-1.9-0.27-3.81-0.15-5.71v-123c0-33.73-22.17-33.73-30.53-33.73-21.28-0.46-38.91 16.43-39.36 37.72-0.01 0.46-0.01 0.92 0 1.37v117.66c-0.76 18.9-16.71 33.61-35.61 32.84-17.83-0.72-32.12-15.01-32.84-32.84V647.68c-1.23-17.23 11.74-32.19 28.97-33.41 1.69-0.12 3.39-0.1 5.08 0.05a31.953 31.953 0 0 1 31.33 17.76 89.435 89.435 0 0 1 54.99-17.76c54.11 0 86.45 33.59 86.45 90.03V833.8a32.25 32.25 0 0 1-8.88 23.72 34.026 34.026 0 0 1-24.82 9.33l-0.04-0.08z m-233.12-7.46h-134.7c-42.77 0-61.85-18.96-61.85-61.57V608.07c0-42.52 19.09-61.57 61.85-61.57h128.74c17.92 0 32.45 14.53 32.45 32.45s-14.53 32.45-32.45 32.45H490.73c-1.22-0.08-2.45 0.09-3.6 0.5 0.13 0-0.15 0.8-0.15 2.89v52.58h106c16.33-1.66 30.91 10.24 32.57 26.57 0.17 1.68 0.2 3.37 0.08 5.06 0.98 16.66-11.73 30.97-28.4 31.95-1.41 0.08-2.83 0.07-4.24-0.05H486.9V791c-0.04 1.06 0.08 2.13 0.35 3.15 1.12 0.15 2.25 0.23 3.38 0.24h122.31c16.96-1.07 31.58 11.81 32.65 28.76 0.07 1.16 0.08 2.33 0.02 3.5 1.35 16.68-11.07 31.3-27.75 32.65-1.64 0.13-3.28 0.13-4.92 0h-0.02zM327.54 482.85c-17.36 2.36-33.34-9.8-35.7-27.16-0.3-2.21-0.37-4.44-0.2-6.67V370.5h-85.27c-45.86 0-66.31-20.52-66.31-66.31v-93.87c0-45.58 20.52-65.9 66.31-65.9h85.27v-31.53c-1.38-17.11 11.37-32.11 28.48-33.49 1.92-0.15 3.84-0.13 5.76 0.07 30.26 0 36.63 18.17 36.63 33.42v31.59h86.09c45.86 0 66.33 20.34 66.33 65.88v93.89c0 45.86-20.52 66.29-66.33 66.29h-86.05v78.52c1.25 17.47-11.9 32.65-29.37 33.91-1.88 0.13-3.76 0.1-5.63-0.1v-0.02zM217.21 211.27c-6.47 0-7.07 0.6-7.07 7.07v78.2c0 6.53 0.6 7.15 7.07 7.15h74.43v-92.42h-74.43z m145.35 92.38h75.29c6.29 0 7.09-0.8 7.09-7.07v-78.25c0-6.29-0.8-7.09-7.09-7.09h-75.31v92.42h0.02z m151.42 655.91C266.43 958.82 66.36 757.55 67.1 510c0.1-35 4.31-69.86 12.52-103.88 4.81-19 23.92-30.68 43.03-26.29 19.1 4.61 30.86 23.81 26.29 42.91-48.93 202.33 75.42 406.01 277.75 454.94a376.924 376.924 0 0 0 87.29 10.56c19.69 0.02 35.64 15.99 35.63 35.69-0.02 19.67-15.96 35.61-35.63 35.63z m398.49-310.05c-19.69 0-35.66-15.96-35.66-35.65 0-2.95 0.37-5.9 1.09-8.76 51.31-201.82-70.7-407.02-272.52-458.33-29.89-7.6-60.59-11.5-91.43-11.62-19.68 0-35.64-15.95-35.64-35.63 0-19.68 15.95-35.64 35.63-35.64h0.01c247.57 0.76 447.65 202.08 446.89 449.65-0.11 36.8-4.76 73.44-13.83 109.1-4 15.8-18.23 26.88-34.54 26.88z"
                  fill="#2c2c2c" p-id="2643">
              </path>
            </svg>
          </a></li>
        </ul>
        <div class="navbar_container_info">
          <span v-if="name===''" @click="router.push('/login')" style="margin-right: 20px;">{{ $t('navbar.login') }}</span>
          <el-dropdown v-else>
            <span style="font-size: larger">
              {{ name }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/personCenter')">{{ $t('userInfo.personalCenter') }}</el-dropdown-item>
                <el-dropdown-item @click="quitLogin">{{ $t('userInfo.exitSafely') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-avatar shape="square" :size="60"
                     :src="avatar"/>
        </div>
      </div>
    </nav>

    <!-- 轮播图 -->
    <div class="carousel">
    </div>

    <!-- 特色内容区 -->
    <section class="features" id="features">
      <hr>
      <div class="container">
        <div class="feature">
          <div class="feature_son"><h3>{{ $t('four.smartCanteen') }}</h3>
            <el-button class="knowMore" type="success" @click="cantennLogin">{{ $t('four.knowMore') }}</el-button>
          </div>
        </div>
        <div class="feature">
          <div class="feature_son"><h3>{{ $t('four.smartClass') }}</h3>
            <el-button class="knowMore" type="success" @click="router.push('/classStart')">{{
                $t('four.knowMore')
              }}
            </el-button>
          </div>
        </div>
        <div class="feature">
          <div class="feature_son"><h3>{{ $t('four.smartWelcome') }}</h3>
            <el-button class="knowMore" type="success" @click="welcome">{{
                $t('four.knowMore')
              }}
            </el-button>
          </div>
        </div>
        <div class="feature">
          <div class="feature_son"><h3>{{ $t('four.entertainmentWorld') }}</h3>
            <el-button class="knowMore" type="success" @click="router.push('/recreationClubStart')">
              {{ $t('four.knowMore') }}
            </el-button>
          </div>
        </div>
      </div>
    </section>

    <!--关于我们-->
    <section class="about" id="about">
      <div class="about_container">
        <div class="about-us">
          <h2>{{ $t('navbar.aboutUs') }}</h2>
          <p>{{$t('p.p1')}}</p>
          <p>{{$t('p.p2')}}</p>
        </div>
      </div>
    </section>
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section about">
            <h3>{{ $t('navbar.aboutUs') }}</h3>
            <p>{{$t('bottom.p')}}</p>
          </div>
          <div class="footer-section links">
            <h3>{{ $t('bottom.fastLink') }}</h3>
            <ul>
              <li><a href="#">{{ $t('bottom.goTop') }}</a></li>
              <li><a>{{ $t('four.smartCanteen') }}</a></li>
              <li @click="router.push('/classStart')"><a>{{ $t('four.smartClass') }}</a></li>
              <li @click="router.push('/recreationClubStart')"><a>{{ $t('four.entertainmentWorld') }}</a></li>
            </ul>
          </div>
          <div class="footer-section contact">
            <h3>{{ $t('navbar.tellUs') }}</h3>
            <p>Email: five@smartSchool.com</p>
            <p>Phone: +123 456 7890</p>
            <p>Address: 188 Main Street, City, Country</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2024 smartSchool. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
@import "../assets/common/style.css";
</style>
